import React from 'react';
import {Button, PageHeader, Spin} from 'antd';
import {isEmpty, isFunction, isString} from 'lodash-es';
import styles from './index.module.less';
import ButtonComp from '../ButtonComp';
import BaseComp from "../Base/BaseComp";

// export interface PageItemProps extends GlobalConsumerProps{
//   /**
//    * Function 实例化对象
//    * */
//   onRef;
//   /**
//    * Boolean 是否显示
//    * */
//   visible?;
//   /**
//    * Boolean 是否需要动画
//    * */
//   animated?;
//   /**
//    * Boolean 是否正在加载
//    * */
//   loading?;
//   /**
//    * String 标题
//    * */
//   title?;
//   /**
//    * Boolean 是否显示操作按钮
//    * */
//   showAction?;
//   /**
//    * Null 自定义操作按钮
//    * */
//   action?;
//   /**
//    * String 操作按钮区域的位置，'footer'：底部，’header'：头部
//    * */
//   actionPos?;
//   /**
//    * Null 在原本的按钮基础上，添加额外的操作
//    * */
//   moreAction?;
//   /**
//    * Function 点击确认后的回调
//    * */
//   onOk?;
//   /**
//    * Object
//    * */
//   okProps?;
//   /**
//    * Function 点击取消后的回调
//    * */
//   onCancel?;
//   /**
//    * Boolean 是否需要返回按钮
//    * */
//   needCancel?;
//   /**
//    * Object pageHeader 组件的属性
//    * */
//   headerProps?;
//   /**
//    * Object
//    * */
//   cardStyle?;
//   /**
//    * Object 侧边栏的宽度
//    * */
//   siderWidth?;
//   /**
//    * Object 页面 Body 区域的样式
//    * */
//   pageBodyStyle?;
//   /**
//    * Boolean 是否有返回键
//    * */
//   onBack?;
//   /**
//    * Object Location 对象包含有关当前 URL 的信息
//    * */
//   location?;
// }
// interface PageItemState {
//   visible?,
//   pageBodyStyle?,
// }
export default class PageItem extends BaseComp {
    bodyRef = null;
    headerRef;
    footerRef;

    static defaultProps = {
        visible: false, // 是否显示
        animated: true, // 是否需要动画
        loading: false, // 是否正在加载
        title: '',
        showAction: true, // 是否显示操作按钮
        action: null, // 自定义操作按钮
        actionPos: 'footer', // 操作按钮区域的位置，'footer'：底部，’header'：头部
        moreAction: null, // 在原本的按钮基础上，添加额外的操作
        onOk: null, // 点击确认后的回调
        okProps: {},
        onCancel: null, // 点击取消后的回调
        needCancel: true, // 是否需要返回按钮
        headerProps: {}, // pageHeader 组件的属性
        cardStyle: {},
    };

    initState(props) {
        return {
            visible: false,
            pageBodyStyle: {
                top: 58,
                bottom: 66,
            },
        }
    }

    componentDidMount() {
        super.componentDidMount && super.componentDidMount();

        this.setState({
            visible: this.props.visible,
            pageBodyStyle: {
                ...this.state.pageBodyStyle,
                top: this.headerRef.offsetHeight,
                bottom: this.footerRef ? this.footerRef.offsetHeight : 0,
            },
        });
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        super.componentDidUpdate && super.componentDidUpdate(prevProps, prevState, snapshot);

        if (prevProps.visible !== this.props.visible) {
            this.setState({visible: this.props.visible});
        }
        if (!this.state.visible) {
            this.handleClosed();
        } else {
            document.body.classList.add('over-hidden');
        }
    }

    componentWillUnmount() {
        super.componentWillUnmount && super.componentWillUnmount();
        this.handleClosed();
    }

    /**
     * 获取中间可滚动区域的尺寸信息
     */
    getBodyOffset() {
        let reObj = {};
        if (this.bodyRef) {
            reObj = {
                width: this.bodyRef.offsetWidth,
                height: this.bodyRef.offsetHeight,
            };
        }
        return reObj;
    }

    handleOk() {
        isFunction(this.props.onOk) && this.props.onOk();
    };

    handleCancel() {
        isFunction(this.props.onCancel) && this.props.onCancel();
    };

    /**
     * 浮层完全关闭之后的回调
     */
    handleClosed() {
        document.body.classList.remove('over-hidden');
    };

    mainRender(context) {
        const {
            headerProps, siderWidth, action, actionPos = 'footer',
            loading, showAction, needCancel, cardStyle,detailStyle = {}
        } = this.props;
        const {visible} = this.state;
        let pageBodyStyle = this.state.pageBodyStyle;
        if (this.props.pageBodyStyle) {
            pageBodyStyle = {...pageBodyStyle, ...this.props.pageBodyStyle};
        }

        const styleO = visible ? {
            opacity: 1,
            // transform: `translateX(0)`,
        } : {
            opacity: 0,
            // transform: `translateX(${document.body.offsetWidth - siderWidth}px)`,
        };
        const wrapStyleO = {left: siderWidth};

        if (!this.props.animated || (this.props.location && this.props.location.query && 'none' === this.props.location.query.animated)) {
            styleO.transition = 'none';
        }

        const finalAction = showAction ? (isEmpty(action) ? (
            <>
                {
                    (
                        <ButtonComp loading={loading} onClick={this.handleOk.bind(this)}
                                    type={'primary'} {...this.props.okProps}>
                            {this.formatMsgByCn('保存')}
                        </ButtonComp>
                    )
                }
                {
                    needCancel && <Button onClick={this.handleCancel.bind(this)}>
                        {this.formatMsgByCn('返回')}
                    </Button>
                }
                {
                    this.props.moreAction
                }
            </>
        ) : action) : null;

        // title 的国际化处理
        let {title} = this.props;
        if (isString(title)) {
            let editInd = title.indexOf('编辑');
            if (-1 !== editInd) {
                title = `${this.formatMsgByCn('编辑')}${this.formatMsgByCn(title.substr(editInd + 2))}`;
            }

            let addInd = title.indexOf('新建');
            let addInd1 = title.indexOf('新增');
            addInd = -1 === addInd ? addInd1 : addInd;
            if (-1 !== addInd) {
                title = `${this.formatMsgByCn('新增')}${this.formatMsgByCn(title.substr(addInd + 2))}`;
            }
        }

        // 是否有返回键
        let backProps = {};
        if (false !== this.props.onBack) {
            backProps.onBack = this.handleCancel.bind(this);
        }

        return (
            <div className={`${styles.detailWrapper} ${this.props.className || ''} page-item`} style={{...wrapStyleO,...detailStyle}}>
                <div className={styles.innerPage} style={styleO}>
                    <header className={styles.header} ref={node => (this.headerRef = node)}>
                        <PageHeader
                            // onBack={this.handleCancel.bind(this)}
                            {...backProps}
                            ghost={false}
                            title={title}
                            extra={'header' === actionPos ? finalAction : null}
                            {...headerProps}
                        />
                    </header>
                    <div className={`${styles.body}`} style={pageBodyStyle} ref={(ref) => {
                        this.bodyRef = ref;
                    }}>
                        {/*<Card bordered={false}*/}
                        {/*      bodyStyle={{ padding: 10, ...cardStyle }}>*/}
                        <Spin spinning={loading} wrapperClassName={'h100'}>
                            {
                                this.props.children
                            }
                        </Spin>
                        {/*</Card>*/}
                    </div>
                    {
                        ('footer' === actionPos && showAction) && (

                            <footer className={styles.footer} ref={node => (this.footerRef = node)}>
                                {
                                    'footer' === actionPos && finalAction
                                }
                            </footer>
                        )
                    }
                </div>
            </div>
        );
    }

}
